<template>
  <el-container class="index">
    <el-header height="auto" style="padding: 0">
      <el-row class="header-container">
        <el-col :span="7">
          <dv-decoration10 style="height:5px"/>
          <span class="back"><i class="el-icon-back"></i></span>
        </el-col>
        <el-col :span="10">
          <el-row>
            <el-col :span="6">
              <dv-decoration8 :color="['#568aea', '#000000']" style="height:50px;"/>
            </el-col>
            <el-col :span="12">
              <div class="header-title-container">
                <span class="header-title-content">大数据可视化平台</span>
                <dv-decoration6
                  class="header-title-decoration"
                  :reverse="false"
                  :color="['#50e3c2', '#67a1e5']"
                  style="height:8px;"
                />
              </div>
            </el-col>
            <el-col :span="6">
              <dv-decoration8 :reverse="true" :color="['#568aea', '#000000']" style="height:50px;"/>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="7">
          <dv-decoration-10 style="height:5px; transform: rotateY(180deg);"/>
          <span class="time">{{nowTime}}</span>
        </el-col>
      </el-row>
    </el-header>
    <el-main style="padding: 0 16px 10px">
      <div id="ol-map"/>
      <el-row style="height: 100%;pointer-events: none;">
        <el-col :span="6" style="height: 100%;">
          <div style="height: 100%;display: grid;grid-template-rows: repeat(2, 48%);grid-row-gap: 4%;">
            <dv-border-box13
              class="pointer-events-a box13"
              :background-color="boxBackgroundColor"
            >
              <echarts ref="trafficFlowPie" :option="trafficFlowPieOption"/>
            </dv-border-box13>
            <dv-border-box12
              class="pointer-events-a box12"
              :background-color="boxBackgroundColor">
              <echarts :option="weekTrafficLineOption"/>
            </dv-border-box12>
          </div>
        </el-col>
        <el-col :span="12" style="height: 100%;">
          <div v-show="eventVideoUrl" style="width: fit-content;height: fit-content">
            <dv-border-box11
              class="pointer-events-a box11"
              :background-color="boxBackgroundColor"
              title="高桥门枢纽相机">
              <i
                class="el-icon-close"
                style="position:absolute;top: -1.4em;right: 0.4em;cursor: pointer;"
                @click="eventVideoUrl=''"
              ></i>
              <video
                :src="eventVideoUrl"
                controls="controls"
                loop="loop"
                autoplay="autoplay"
                style="width: 600px;border: 6px;"
                @canplay="resizeVideo"
              >
                your browser does not support the video tag
              </video>
            </dv-border-box11>
          </div>
        </el-col>
        <el-col :span="6" style="height: 100%;">
          <div style="height: 100%;display: grid;grid-template-rows: repeat(2, 48%);grid-row-gap: 4%;">
            <dv-border-box13
              class="pointer-events-a box13"
              :background-color="boxBackgroundColor"
            >
              <dv-scroll-board
                class="scroll-board"
                ref="scrollBoard"
                :config="scrollBoardConfig"
                style="border-radius: 4px"/>
            </dv-border-box13>
            <dv-border-box12
              class="pointer-events-a box12"
              :background-color="boxBackgroundColor"
            >
              <echarts :option="congestionIndexOption"/>
            </dv-border-box12>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
// olMap
import 'ol/ol.css'
import { Map, View, Feature } from 'ol/index'
import { defaults as controlDefaults, MousePosition, FullScreen } from 'ol/control'
import { KML, GeoJSON } from 'ol/format'
import { Vector as VectorSource, XYZ as XYZSource, OSM as OSMSource, TileDebug } from 'ol/source'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { fromLonLat, useGeographic } from 'ol/proj'
import { boundingExtent, getCenter, containsCoordinate } from 'ol/extent'
import { Draw, Modify, Select, Snap } from 'ol/interaction'
import { toContext } from 'ol/render'

import { Polygon, LineString, Circle, Point } from 'ol/geom'
import GeometryType from 'ol/geom/GeometryType'
import { Circle as CircleStyle, Fill, Stroke, Style, Icon } from 'ol/style'
import Echarts from '@/components/Echarts/index'

const lightColor = ['#E062AE', '#96BFFF', '#67E0E3',
  '#9FE6B8', '#FFDB5C', '#32C5E9',
  '#ff9f7f', '#fb7293', '#E690D1',
  '#e7bcf3', '#9d96f5', '#8378EA']

export default {
  components: { Echarts },
  data() {
    return {
      boxBackgroundColor: 'rgba(31,51,162,0.7)',
      trafficFlowPieOption: {
        title: {
          text: '当日车型流量占比',
          top: 8,
          left: 'center',
          textStyle: {
            fontSize: 24,
            color: 'white'
          }
        },
        color: lightColor,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        toolbox: {
          right: 20,
          iconStyle: {
            borderColor: 'rgba(255, 255, 255, 1)'
          },
          feature: {
            myTool1: {
              show: true,
              title: '切换',
              icon: 'path://M96 416h832c0.32 0 0.576-0.192 0.896-0.192a30.656 30.656 0 0 0 30.976-30.976c-0.064-0.256 0.128-0.512 0.128-0.832a31.424 31.424 0 0 0-14.912-26.368l-188.48-188.48a30.72 30.72 0 1 0-43.456 43.456L852.544 352H96a32 32 0 0 0 0 64z m832 192H96c-0.32 0-0.576 0.192-0.896 0.192a30.528 30.528 0 0 0-30.976 30.976c0.064 0.256-0.128 0.512-0.128 0.832 0 11.264 6.144 20.672 14.912 26.368l188.48 188.48a30.72 30.72 0 1 0 43.456-43.456L171.456 672H928a32 32 0 0 0 0-64z',
              onclick: () => {
                this.toggleTrafficFlow()
              }
            }
          }
        },
        legend: {
          orient: 'horizontal',
          bottom: 4,
          data: ['小型车', '中型车', '大型车'],
          textStyle: {
            color: 'rgba(255, 255, 255, 1)',
            fontSize: 16
          }
        },
        series: [
          {
            name: '车型流量占比',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 335,
                name: '小型车'
              },
              {
                value: 310,
                name: '中型车'
              },
              {
                value: 234,
                name: '大型车'
              }
            ]
          }
        ]
      },
      weekTrafficLineOption: {
        title: {
          text: '交通量分布',
          top: 4,
          left: 'center',
          textStyle: {
            fontSize: 24,
            color: 'white'
          }
        },
        color: lightColor,
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告'],
          left: 'center',
          top: 44,
          textStyle: {
            color: 'rgba(255, 255, 255, 1)',
            fontSize: 16
          }
        },
        grid: {
          top: 80,
          right: '4%',
          bottom: '3%',
          left: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 1)'
            }
          },
          data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 1)'
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '周一',
            type: 'line',
            smooth: true,
            data: [2, 5, 36, 95, 71, 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 150, 232, 201, 154, 92, 45, 12, 8]
          },
          {
            name: '周二',
            type: 'line',
            smooth: true,
            data: [4, 18, 23, 63, 90, 220, 182, 191, 234, 290, 330, 310, 340, 346, 385, 356, 285, 213, 183, 132, 85, 45, 13]
          },
          {
            name: '周三',
            type: 'line',
            smooth: true,
            data: [5, 13, 32, 75, 82, 150, 232, 201, 154, 190, 330, 410]
          }
        ]
      },
      congestionIndexOption: {
        title: {
          text: '拥堵指数分布',
          top: 4,
          left: 'center',
          textStyle: {
            fontSize: 24,
            color: 'white'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 1)'
            }
          },
          data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 1)'
            }
          },
          splitLine: {
            show: false
          }
        },
        visualMap: {
          top: 10,
          right: 10,
          pieces: [{
            gte: 0,
            lt: 2,
            color: 'rgb(0,138,38)'
          }, {
            gte: 2,
            lt: 4,
            color: 'rgb(145,210,68)'
          }, {
            gte: 4,
            lt: 6,
            color: 'rgb(249,255,86)'
          }, {
            gte: 6,
            lt: 8,
            color: 'rgb(255,160,51)'
          }, {
            gte: 8,
            lt: 10,
            color: 'rgb(255,19,1)'
          }],
          textStyle: {
            color: 'rgba(255, 255, 255, 1)',
            fontSize: 14
          },
          outOfRange: {
            color: '#999'
          }
        },
        series: {
          name: '周一',
          type: 'line',
          smooth: true,
          data: [0, 1, 1, 2, 5, 4, 3, 6, 7, 6, 6, 5, 7, 8, 8, 9, 5, 6, 4, 3, 2, 1, 0, 1]
        }
      },
      scrollBoardConfig: {
        rowNum: 3,
        waitTime: 5000,
        columnWidth: ['100%'],
        oddRowBGC: 'transparent',
        evenRowBGC: 'transparent',
        data: []
      },
      scrollBoardEventList: [
        {
          eventId: 1,
          cameraId: 1,
          name: '违停',
          timestamp: '2020-11-18 20:10:10',
          img: 'https://www.w3school.com.cn/i/eg_tulip.jpg',
          video: 'https://www.w3school.com.cn/i/movie.ogg'
        },
        {
          eventId: 2,
          cameraId: 1,
          name: '违停',
          timestamp: '2020-11-18 20:10:10',
          img: 'https://www.w3school.com.cn/i/eg_tulip.jpg',
          video: 'https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-720p.mp4'
        }
      ],
      eventVideoUrl: '',
      loading: true,
      nowTime: '2020-01-01 00:00:00',
      nowTimer: null,
      // 地图相关
      map: {
        instance: null,
        coordinates: [
          [118.70418548583986, 32.134920063677264],
          [118.98845672607422, 32.134920063677264],
          [118.98845672607422, 31.960901002531404],
          [118.70418548583986, 31.960901002531404]
        ],
        drawing: false // 绘制中?
      },
      roads: [[118.87055021465763, 32.09648360178127], [118.87023978498476, 32.09738346685837], [118.87023978498476, 32.09738346685837], [118.87024979082176, 32.0974434897369], [118.87024978900591, 32.097463493885506], [118.87025979483892, 32.097523516758585], [118.87025979302305, 32.097543520906505], [118.87026979703622, 32.09762354792137], [118.87031983610876, 32.09781363938538], [118.87033985497843, 32.097853668482], [118.87039991330747, 32.097953751542406], [118.87055007121148, 32.0980639296427], [118.87064016788203, 32.098104030748765], [118.87069022255719, 32.09811408426802], [118.87074027713196, 32.09812413770232], [118.87095050996905, 32.09811435042629], [118.87109066904821, 32.09805448035861], [118.8711707619295, 32.09799454897653], [118.87126086996959, 32.09788461710059], [118.8712808953461, 32.09784462897687], [118.87129091075172, 32.09779462869134], [118.87130092524548, 32.09775463047432], [118.87130093432367, 32.0976546097422], [118.87129092800032, 32.0976045892999], [118.87127090989458, 32.097564560845456], [118.87125089268045, 32.0975145303026], [118.87119083458622, 32.097434453107034], [118.87111075357203, 32.0973643575911], [118.87079042148571, 32.097143985775375], [118.87079042148571, 32.097143985775375], [118.8700395947749, 32.09698317449877], [118.86995950553475, 32.09696308623299], [118.86963914512967, 32.0968927330995], [118.86963914512967, 32.0968927330995], [118.86945893250865, 32.0969425515178], [118.86929874284463, 32.09698238828256], [118.86916858550514, 32.097042260736885], [118.86911852418486, 32.097072212968506], [118.86895831967465, 32.0972520769844], [118.86891825794781, 32.09741206671355], [118.86892825976423, 32.09752210040234], [118.86900834044489, 32.097672218364856], [118.8690483838698, 32.09771227000727], [118.86915850659801, 32.09778240345625], [118.86921857408396, 32.09781247438094], [118.86928865400125, 32.097832553866084], [118.86947887397072, 32.09784275961177], [118.86959901455612, 32.097822883482884], [118.86993941554218, 32.09770321870809], [118.86993941554218, 32.09770321870809], [118.86995944106997, 32.09767323355004], [118.86997946930575, 32.097613242157514], [118.87027987912626, 32.09684339647338], [118.87040005130838, 32.09643343607875], [118.8705102035661, 32.09611348350727], [118.87056027302631, 32.09596350397009], [118.8708006014049, 32.09528360921271], [118.87086068313705, 32.095113635186884], [118.87092076563172, 32.09493365894125], [118.87096081963963, 32.094823676787286], [118.87103091377092, 32.09463370839583], [118.87107096850868, 32.09451372399104], [118.87115107506662, 32.09430376126258], [118.87146148700113, 32.09347390004719], [118.87159166329823, 32.09307394631105], [118.87167176816465, 32.09286398202868], [118.87190207421101, 32.09219406949703], [118.87215240275283, 32.09148416611929], [118.87242275497965, 32.090714267128654], [118.87264303908105, 32.09009434893467], [118.87276319245805, 32.08976439450068], [118.87291338220437, 32.0893644533217], [118.87315368475822, 32.088714543546885], [118.87343402759141, 32.088034662585045], [118.8739146007876, 32.08694487579703], [118.87460539258059, 32.08554520250809], [118.87475556073298, 32.08525527421799], [118.87591680746105, 32.08324584977333], [118.87619709469631, 32.08281599288669], [118.87664754817875, 32.08213621906765], [118.87685775611381, 32.08182632356727], [118.87703793138147, 32.08157641516853], [118.87756843862054, 32.08084667905618], [118.8786794543927, 32.07938721174976], [118.87873950783215, 32.07930723896495], [118.88017073016627, 32.077437854182165], [118.88082125508288, 32.07658810742728], [118.88109146806573, 32.07622820623703], [118.88156182930169, 32.07561837495277], [118.88297285338608, 32.07376882395452], [118.88445382700483, 32.071839211642974], [118.88716534140727, 32.06827968320588], [118.88716534140727, 32.06827968320588], [118.88810578415539, 32.067039774316314], [118.88970643620748, 32.064949848278836], [118.89082681878658, 32.06346983156867], [118.89148701926669, 32.062549786022274], [118.89171708756966, 32.06218975706509], [118.89190714132098, 32.06189973304358], [118.89216721403018, 32.061479692531336], [118.89231725603129, 32.06121966392052], [118.89237727215209, 32.061119653083445], [118.8924272869563, 32.061019640256575], [118.89266735535506, 32.06054957936443], [118.89285740906271, 32.060159525406085], [118.89297744328162, 32.05989948748396], [118.89297744328162, 32.05989948748396], [118.89325752511887, 32.05923938472829], [118.89357763240244, 32.05827921748467], [118.89369767853512, 32.057839135847956], [118.89386774776585, 32.05715900648097], [118.89404785024163, 32.05609879255988], [118.89406786534765, 32.05593875931295], [118.89408787771774, 32.055808732702715], [118.89413792529884, 32.05529862498614], [118.8941679650096, 32.0548685327106], [118.89417801504423, 32.054318411502464], [118.89417804491264, 32.05398833808863], [118.89417806753997, 32.05373828245305], [118.89415810594708, 32.05330818454864], [118.89412813229389, 32.05300811443886], [118.89411814468613, 32.05286808214326], [118.89409816221472, 32.05266803535297], [118.89404819689616, 32.05226794055345], [118.89402820711283, 32.05214791151157], [118.8939782379953, 32.05178782543094], [118.89390826707924, 32.05143773905202], [118.89368834057166, 32.050517506213275], [118.89355837436808, 32.050067388475895], [118.89344839679521, 32.04974730183173], [118.89332842154789, 32.04938720424773], [118.89312845213038, 32.04888706254152], [118.89305846280789, 32.04870701140448], [118.89290848071627, 32.048366911326696], [118.89279849137618, 32.048136841635035], [118.89275849477181, 32.04805681697528], [118.8927384964393, 32.0480168046191], [118.89231852498148, 32.04719654557604], [118.89210852958317, 32.046856428864494], [118.8920385321317, 32.04672638579732], [118.89166853000552, 32.04616618315572], [118.89147852646246, 32.0458760762549], [118.8910785067092, 32.045335861962094], [118.89094849625862, 32.04518579656888], [118.89058846604642, 32.044735603935045], [118.89046845363478, 32.04459554074278], [118.89031843665956, 32.044425462014686], [118.89019842173053, 32.044295399692764], [118.88998839410904, 32.044065288596585], [118.88968834917334, 32.04375513082406], [118.88875817335425, 32.04288463808259], [118.88831807156085, 32.04251440167602], [118.88699769668642, 32.0415436756261], [118.88577726355929, 32.040772969139894], [118.88505697123311, 32.04035253140808], [118.88476684656644, 32.04018234896303], [118.88457676168696, 32.04008223015387], [118.88354627428853, 32.03951155448016], [118.88142511236825, 32.03836003596723], [118.88104488242533, 32.03814974420092], [118.88082474612588, 32.03802957306603], [118.88064463312355, 32.037929431234815], [118.87816292417376, 32.03657735644642], [118.8774824074867, 32.03620674676237], [118.87719217931391, 32.0360664855104], [118.87679186277805, 32.03582610939287], [118.8762013800549, 32.03550555149768], [118.87527058903952, 32.03499464484954], [118.87493029089465, 32.03480430470862], [118.8738793421265, 32.03418322039432], [118.87287840171754, 32.03352213533769], [118.87271824778763, 32.033411957449985], [118.87254808426535, 32.033281764478374], [118.87133688834041, 32.03233035624727], [118.87049603226635, 32.031569326089105], [118.86996548215659, 32.03103865226096], [118.86942491474369, 32.03044794459179], [118.86917464969244, 32.03015760981991], [118.86897443661466, 32.02991733867925], [118.86884429763955, 32.02975716081316], [118.86856399747026, 32.029396772308466], [118.86829370631013, 32.02903639229435], [118.86782319761072, 32.028355712910894], [118.86742276266425, 32.02772511732459], [118.86695224653843, 32.026954404073294], [118.86628149754299, 32.02584337217744], [118.8658710319295, 32.02515273119078], [118.86492993638049, 32.02362125347378], [118.86474972084072, 32.02335097261642], [118.86449941908607, 32.02298058202121], [118.86425912681649, 32.02263020643298], [118.86422908979792, 32.022590160218584], [118.8640188297678, 32.022309835950125], [118.86381858005586, 32.02204952740378], [118.86324785599125, 32.02135865310747], [118.8626570887058, 32.0207077526307], [118.86199620911714, 32.020056750850124], [118.86075450459563, 32.01896486478798], [118.86031388135376, 32.01864420037434], [118.8590921203917, 32.01775232945752], [118.8569989815757, 32.016359062283556], [118.85565689968422, 32.015456906116434], [118.85523623603748, 32.01517622154879], [118.85367372768934, 32.01412363915579], [118.852792281651, 32.01354215994976], [118.85253185116969, 32.01336171752649], [118.85088909147389, 32.01225890027305], [118.84963694479552, 32.011386706806356], [118.84863520485683, 32.010634916417885], [118.8485550646342, 32.01057477232056], [118.8477035703528, 32.00988322145726], [118.84634115338125, 32.00869069166606], [118.84515903097014, 32.00757845156153], [118.84428744881488, 32.0067467817991], [118.84250416777228, 32.00502332177962], [118.8403501285692, 32.002939077805635], [118.84007961571227, 32.002678540508725], [118.83952856744241, 32.002147442918336], [118.83607189220368, 31.998800469941365], [118.83466913870905, 31.9974476047441], [118.8335068416604, 31.996315214310812], [118.8332363038227, 31.996064659278243], [118.83307598584489, 31.99590432735171], [118.83294572639477, 31.995784059822526], [118.83211406562768, 31.9950223501188], [118.8317733825051, 31.9947216509191], [118.83135253724633, 31.99435078623571], [118.83071124343336, 31.993819474222327], [118.83038057479727, 31.993548797486984], [118.82944868353707, 31.992816894150927], [118.82840655790125, 31.99204477122452], [118.82830635282215, 31.99197456777375], [118.82814602531549, 31.991854240316016], [118.82729427808043, 31.9912725123305], [118.82711390739773, 31.991152146727256], [118.82677320715769, 31.99092145508999], [118.82620203081845, 31.990550298430882], [118.82499954741434, 31.989807869868514], [118.82457867655832, 31.989557021349533], [118.8229853722099, 31.988663820665675], [118.82239414285878, 31.988362639829635], [118.82155239299617, 31.98793095830262], [118.81967849263381, 31.987057238665365], [118.81833569906887, 31.986474588613575], [118.81594072738045, 31.985519899066993], [118.81532946415768, 31.98526870503073], [118.81444764518552, 31.984916988914602], [118.81352575000484, 31.9845451993635], [118.81168198017579, 31.98381164184236], [118.8112511037108, 31.983640814700877], [118.81090039184485, 31.983500142305786], [118.81059978361073, 31.98336956456398], [118.80873602903226, 31.982626017819445], [118.80820496669273, 31.982415014113187], [118.80807470652611, 31.98236476875243], [118.80606070440993, 31.981681022204995], [118.80558977880204, 31.98150014859594], [118.80511886934845, 31.98117924554438], [118.80428725014033, 31.98084771252855], [118.80395661114508, 31.980697101362363], [118.80383637880837, 31.980646880558908], [118.8024437026065, 31.98009434519598], [118.80202290093376, 31.979923584032626], [118.80167223514472, 31.979782952239095], [118.80051004529534, 31.97931087110502], [118.79993897764946, 31.97908985923867], [118.79698356232275, 31.9778947026912], [118.79540073871107, 31.977262010200654], [118.79510020815356, 31.97715150681929], [118.79459932920074, 31.97696067040408], [118.79444906694701, 31.976900419794223], [118.79416857682871, 31.97680995832915], [118.79254578331799, 31.976237309826153], [118.79219518811585, 31.976116745854064], [118.79147397203712, 31.97588559818111], [118.79075276856518, 31.975664464586934], [118.78965095332629, 31.975362764287603], [118.78940054644372, 31.97528237911343], [118.78925030240457, 31.975242150574736], [118.78862929984413, 31.975081212939305], [118.7880784193249, 31.974940389458915], [118.78769781536698, 31.974849826424624], [118.78651596562597, 31.974578103335396], [118.78608530186375, 31.974477483873226], [118.78564462722858, 31.974386857799328], [118.78508377568438, 31.9742860716492], [118.78487345995724, 31.97423577608528], [118.7847632945441, 31.974215623162102], [118.78434266671516, 31.974135041397748], [118.78244990494585, 31.973822494081], [118.78126823626552, 31.97365095925619], [118.77911531560656, 31.97331826031989], [118.77860464487073, 31.97324764182064], [118.7759913571458, 31.972844589173338], [118.77428934566055, 31.972582713653896], [118.77102578368032, 31.97209937874122], [118.77036511238812, 31.971988742770684], [118.76867346504665, 31.971757192342007], [118.76801285185708, 31.971666612906073], [118.76441982437578, 31.97111370896379], [118.76273858735352, 31.97084250171918], [118.76157780023868, 31.970661728164654], [118.76146772783449, 31.97065165894171], [118.76030700179959, 31.970470938265034], [118.75890619981855, 31.970260135025075], [118.75804574818557, 31.970129676799253], [118.75783564341761, 31.970089567116638], [118.7575254904214, 31.970049412557955], [118.75659505871452, 31.96989896318178], [118.75276366790081, 31.96931745932999], [118.75205347893609, 31.96921724249748], [118.74703277511534, 31.968446237234442], [118.74593276729772, 31.968286146436544], [118.74556277623726, 31.968236127099534], [118.74509279500167, 31.968186113148125], [118.74478281240486, 31.968156109224164], [118.74451283043052, 31.96813611019332], [118.74379289197354, 31.968106131692043], [118.74272302037677, 31.968116212585198], [118.74166318779896, 31.96822635863641], [118.74096332187209, 31.968336487051765], [118.73987356786039, 31.968566737487766], [118.73943367934406, 31.968686857572294], [118.73912376337593, 31.968766945519757], [118.73871387778908, 31.968907075294272], [118.73843395972365, 31.96900716857647], [118.73744427337758, 31.969397530474417], [118.736684537413, 31.969757847276227], [118.73636465436503, 31.96992799139996], [118.73624469878662, 31.969998047877766], [118.73601478512823, 31.970138158980273], [118.73577487821919, 31.97027827561961], [118.73529506816077, 31.970598524588883], [118.73477528296881, 31.97096880939714], [118.7343054847567, 31.97132908139322], [118.73387567668522, 31.97166933989403], [118.73345587290275, 31.971989596218656], [118.73187667690611, 31.973210622664986], [118.73036754375907, 31.974381690353656], [118.72942813718971, 31.975052383555287], [118.72903839682265, 31.975302674106594], [118.72887850540874, 31.975402794306095], [118.72853874176381, 31.97559304759923], [118.72767936566099, 31.976023695159576], [118.72759942525225, 31.976063756746736], [118.72697990063006, 31.976324230248718], [118.72638037953256, 31.976534691899534], [118.72619053485373, 31.97659483925118], [118.72591076628628, 31.976685059095598], [118.72572092616811, 31.97673520729498], [118.72533125826152, 31.976845517185104], [118.7247617566211, 31.97698597491932], [118.72451198130845, 31.977026174324077], [118.72406239134051, 31.97710654060038], [118.72382261358968, 31.977146738214284], [118.72366276364983, 31.977166869527313], [118.72301338479944, 31.9772374095006], [118.72255383724044, 31.97725779361295], [118.7212951224359, 31.977278874803403], [118.71979674635564, 31.9771601988126], [118.71939719662497, 31.97710055814254], [118.71834841427508, 31.976871509863187], [118.71816862726072, 31.9768316765309], [118.71731965233468, 31.976612470691023], [118.71707994830159, 31.97653269504548], [118.71571168715701, 31.975983989677832], [118.71561181768577, 31.975934084249204], [118.71550196122824, 31.97588418980001], [118.7153521587653, 31.975804331620125], [118.71473298384196, 31.975474925504063], [118.71444337688384, 31.97529520151101], [118.71413380014488, 31.975105500018756], [118.71308526988582, 31.97434650634637], [118.71294547051002, 31.97422663877833], [118.71259597507498, 31.97392697248235], [118.71239626702634, 31.973737160558013], [118.7119069904307, 31.97324762081573], [118.71170728900225, 31.973037808451842], [118.71168731976285, 31.973007825203197]],
      roads_back: [[118.71168731976285, 31.973007825203197], [118.71133784879991, 31.97260814916573], [118.71118807852133, 31.972418284842103], [118.71108823240186, 31.972288374896962], [118.71081864948631, 31.971938619765197], [118.71072878937059, 31.971818701100194], [118.70955065014452, 31.97022978575662], [118.7094707781835, 31.97011986026079], [118.70924113679047, 31.96992010232035], [118.70904144968257, 31.969750314952613], [118.70882179657808, 31.969550547178986], [118.70838249511961, 31.96915101579302], [118.70762370445442, 31.96859186837146], [118.70732418316263, 31.968412218859356], [118.70709454862488, 31.968312498031995], [118.70684494237864, 31.96826281668313], [118.70652544246624, 31.96827324414144], [118.70640562749955, 31.968313413524434], [118.70621590791971, 31.968523716348145], [118.70541708665313, 31.969565038142658], [118.70527729331111, 31.969765275394074], [118.70529724092238, 31.96998529882538], [118.70536709255714, 31.97037529324413], [118.70536709255714, 31.97037529324413], [118.70560667659745, 31.97071504500791], [118.70568653956241, 31.970814959531616], [118.70681461161901, 31.972373804902418], [118.70705420741973, 31.97270356389799], [118.70710412240723, 31.972783516488427], [118.70749346332192, 31.97339314585999], [118.70792274250591, 31.974062741581474], [118.70797265888321, 31.974142695394875], [118.70828214369415, 31.974622406925388], [118.70837199464651, 31.9747623238374], [118.70865153773329, 31.975142053984126], [118.7095201317336, 31.976351236656512], [118.70980966893057, 31.976750968317244], [118.71050856206006, 31.977730334092357], [118.71069826593789, 31.977980160737342], [118.71091792269767, 31.97828996609224], [118.71102775123349, 31.978449870465045], [118.71136722703562, 31.978909569183667], [118.71193635630257, 31.979689073906886], [118.71212607130501, 31.979918904052703], [118.71212607130501, 31.979918904052703], [118.71252556043032, 31.979478336308947], [118.71265539624117, 31.97932815122102], [118.71335452715091, 31.978467151388326], [118.71412358233358, 31.97761609122208], [118.71455306348658, 31.97714550829009], [118.71607128931088, 31.97541347853835], [118.71634098967671, 31.975033108884826], [118.71642091313883, 31.974792970370743], [118.71642093430881, 31.974562917232465], [118.71630110903091, 31.97427297490667], [118.71619125715543, 31.974143059561893], [118.71600150627158, 31.97400322622785], [118.71573185344671, 31.97390348790778], [118.71545220858869, 31.9738837810634], [118.71517256014172, 31.973934092872625], [118.71486294212694, 31.974104467459323], [118.71474308777825, 31.97420462117186], [118.71464320341663, 31.97435476501254], [118.71456329066578, 31.974534894173324], [118.7145233196543, 31.97478499579571], [118.71460319732343, 31.97498495432877], [118.71463315472914, 31.975024930743906], [118.71465312420382, 31.975074920427705], [118.71471303915541, 31.975154873380653], [118.71474299667976, 31.975194849899587], [118.71486282618098, 31.975364758569402], [118.71500263881148, 31.975444625247125], [118.71572169023077, 31.975813939796147], [118.71606125113233, 31.97596361611977], [118.71644076517636, 31.976133259278267], [118.71663052465273, 31.97621308143872], [118.71676036036772, 31.976272961644476], [118.71691017335564, 31.97632281965265], [118.71737959248773, 31.976482380225253], [118.71751942083837, 31.976532251257527], [118.71772916611897, 31.976592055534663], [118.71823855492775, 31.976731584880323], [118.71843831836948, 31.976781401503043], [118.71919743418405, 31.97696071437696], [118.71981673348935, 31.977060157177768], [118.7209554914295, 31.97715914681726], [118.72218421608062, 31.97717808563387], [118.72282358063632, 31.97713754224882], [118.72376267964816, 31.977046762504433], [118.72411235561908, 31.976986473872017], [118.7244320632131, 31.97693621483371], [118.72480173229552, 31.976855914648954], [118.7250714935264, 31.97680570055643], [118.72522136327615, 31.976765579896373], [118.72557106351674, 31.976665299891888], [118.72572093630644, 31.97662518187114], [118.72687999002319, 31.976244279723993], [118.72757945217509, 31.975943742137133], [118.72769936186653, 31.975893652067658], [118.72773933220297, 31.97587362138879], [118.72782926616242, 31.97582355141553], [118.72807908273131, 31.97570336293452], [118.72812904598653, 31.975683326431838], [118.72847879628206, 31.975493061875756], [118.72893847677967, 31.975232718507645], [118.72928824254507, 31.975002454934927], [118.72978791692448, 31.97467208576956], [118.7298978473733, 31.974592004061304], [118.73030759369425, 31.974281700659915], [118.73201661446666, 31.972960495227838], [118.73258631555025, 31.97252011727776], [118.73396565050689, 31.971439248555004], [118.73408559616098, 31.971349177253565], [118.73420554335395, 31.971249104178995], [118.73433548607414, 31.97114902754261], [118.73522511021578, 31.970498527769053], [118.73569492240574, 31.970188283441985], [118.73576489467928, 31.97014824918289], [118.736164741351, 31.96990805429591], [118.73629469226854, 31.969837994093034], [118.73660457753402, 31.9696778546847], [118.73715438384578, 31.969397617110143], [118.73787414580728, 31.9690773340148], [118.7384139811231, 31.9688471368004], [118.73864391409435, 31.968757057974457], [118.73894382759788, 31.968666964473087], [118.73929373302133, 31.96854685622043], [118.74008353263937, 31.96834664522697], [118.74019350617358, 31.968326619528995], [118.74043345085059, 31.968276563581792], [118.74073338500385, 31.96821649728922], [118.74120328846001, 31.968136403509753], [118.74153322587645, 31.96808634408743], [118.74202314042525, 31.968026266752577], [118.74287301306062, 31.967966164362135], [118.74387289815814, 31.967956092975573], [118.74478282716528, 31.967996072330898], [118.7456127891399, 31.96808609326248], [118.74597278195021, 31.968126110697174], [118.74735280271054, 31.96832623386336], [118.75002307742767, 31.96873668241567], [118.75184344295893, 31.969017142683708], [118.7541941277626, 31.969377920761616], [118.75523450685904, 31.969538331137258], [118.75697524553968, 31.969799105735568], [118.75755552016498, 31.96988938955391], [118.75785566842487, 31.96992953969963], [118.75804576386635, 31.9699596375774], [118.75973668052342, 31.97022056468191], [118.76158782076301, 31.97051169965678], [118.76228829018613, 31.970612158965515], [118.76321894442854, 31.970752797882916], [118.7640595664034, 31.970873399844372], [118.76489020996026, 31.97098401707352], [118.76766255225857, 31.97141626494683], [118.7705653272628, 31.97187890088231], [118.77342837994435, 31.972321769885237], [118.77848450155692, 31.97308746427155], [118.77916539352047, 31.973198292077875], [118.78128827640019, 31.973520954258575], [118.78328111646142, 31.97382356928543], [118.78441278324105, 31.9740151072392], [118.78465314237876, 31.974055438228543], [118.78484342718323, 31.97409570327462], [118.78534418241276, 31.974196404115688], [118.7860652835714, 31.97433742391742], [118.78641582334868, 31.97441792726788], [118.78674633609633, 31.974488403481562], [118.78745744921464, 31.974649439612065], [118.78791817758815, 31.97476011913209], [118.78823868753017, 31.974840595744777], [118.78879958597813, 31.974991438183146], [118.78945064018238, 31.975162424613586], [118.78971106494517, 31.975232822486205], [118.79076279741236, 31.97553444951237], [118.79092306452695, 31.97557469837672], [118.7917043722303, 31.975815930385057], [118.79236548952773, 31.976036987495846], [118.79310675604151, 31.976278182668228], [118.79324699677387, 31.976328411187442], [118.79354751400159, 31.976438902955366], [118.79399829444593, 31.976599643060773], [118.79516032713457, 31.977031574536493], [118.79527052161306, 31.977071758954324], [118.79536068027397, 31.97711191170508], [118.7970937732696, 31.97780486102212], [118.79794531714266, 31.978146331521664], [118.79997906570597, 31.978959896448654], [118.80162215305205, 31.979622829779515], [118.8017423816955, 31.97966304422934], [118.80212310531948, 31.979813730226017], [118.80249381202681, 31.97996440126256], [118.80383639164049, 31.980506848192597], [118.80458784873449, 31.980808228700496], [118.80577016212337, 31.9812504090873], [118.80609079305542, 31.98137100373301], [118.80741340797496, 31.981903478423177], [118.80816490444012, 31.98220489359683], [118.8083252240854, 31.982275197726246], [118.80867592472667, 31.982425863286952], [118.8087961654296, 31.982476091460516], [118.80955769455011, 31.982787538612108], [118.81039939360758, 31.983119142110194], [118.81090040831856, 31.98332010068164], [118.81131124270955, 31.98348088753158], [118.81219303775158, 31.983842585274143], [118.81360593028661, 31.98440531492132], [118.81600086771674, 31.985369976249793], [118.81841588163176, 31.986334706273812], [118.81950815494748, 31.986796859052856], [118.82019959408697, 31.987108227918934], [118.8216425965357, 31.987801097715526], [118.82189311802925, 31.987921596284824], [118.82249436864646, 31.988222795826605], [118.82306555538646, 31.98852393899795], [118.8241678421772, 31.989136152130957], [118.82615194559493, 31.990320151245733], [118.82655277125663, 31.99058096316555], [118.8274045230812, 31.991142688681848], [118.82822620731989, 31.991714357811492], [118.82839655590298, 31.99183470394151], [118.83021024926167, 31.99319839985367], [118.83049081781292, 31.993418972273858], [118.83067118222841, 31.993569341996405], [118.83103191032917, 31.99387008084849], [118.83134253725675, 31.99412071449885], [118.83152290048395, 31.994271083254706], [118.83226438785101, 31.994922604616676], [118.83278542892117, 31.995393674366273], [118.83347680308586, 31.996055098998742], [118.83361708168523, 31.996185386677976], [118.834057955845, 31.996596290063305], [118.8341781931555, 31.996716538041497], [118.83437858833072, 31.99691695105532], [118.83479941677659, 31.997337817206898], [118.83488959495554, 31.99741800028824], [118.8360819345113, 31.998560432663883], [118.83652279350557, 31.9990013326706], [118.83869699942329, 32.00109572138442], [118.83977906643386, 32.002147886707235], [118.84033011251641, 32.002678982475146], [118.84110156892191, 32.0034205091395], [118.8422036317172, 32.00448267604599], [118.8426043760972, 32.00487346059806], [118.8435260776168, 32.00576525404676], [118.84450787213743, 32.00671714994597], [118.84529930535797, 32.00747866522008], [118.8462209595246, 32.008350412665536], [118.84735297168474, 32.00936252449124], [118.84848496247774, 32.01029459375403], [118.84868531217217, 32.01045495634211], [118.84994749856135, 32.01140720878464], [118.85100931305871, 32.0121490645844], [118.85292251526572, 32.01342233229948], [118.85368376183774, 32.01393361067039], [118.85441494411626, 32.01442482587856], [118.85646818306026, 32.01579816803414], [118.85836105812217, 32.017061154483564], [118.86043407256474, 32.01850432999074], [118.8618860820624, 32.01971652955651], [118.86203628454669, 32.01985675706179], [118.86302759555528, 32.02084825724415], [118.86362836625186, 32.02152917065983], [118.8639087186065, 32.02187960070353], [118.86433925134824, 32.022450263939795], [118.86447942297147, 32.02264047967116], [118.86502007224851, 32.02344132148995], [118.86606127925438, 32.025132951284675], [118.86635160882743, 32.02560339936918], [118.86679210044721, 32.026344080231176], [118.86749287003957, 32.02749514432723], [118.86772312046917, 32.0278554864092], [118.86787328132726, 32.02810571204415], [118.86834378821727, 32.02879639297002], [118.86865412106859, 32.02921683010541], [118.86878425828694, 32.029407015633026], [118.86913463183663, 32.029837493765264], [118.86956508586478, 32.03034807142527], [118.86996550479721, 32.030788595377075], [118.87071627996002, 32.03153954613722], [118.87153710888124, 32.03228054546192], [118.87231787961382, 32.03290145541849], [118.87257813158375, 32.033101752511676], [118.87279834344596, 32.03326199995055], [118.87292846810718, 32.033352144332376], [118.87310863906973, 32.033482344485314], [118.87321874373869, 32.03355246409318], [118.87330882875509, 32.03361256225515], [118.87395943300494, 32.03404326190538], [118.87459000592314, 32.03441391500431], [118.87489027248091, 32.0345942218475], [118.87619138844985, 32.03531550008387], [118.87692198434233, 32.03570618740823], [118.87744239349377, 32.03599666770619], [118.87755247864263, 32.03605676770874], [118.87941383743893, 32.03706838852612], [118.88070468845073, 32.03776943491204], [118.88092482595982, 32.03788960707902], [118.88378640887899, 32.039461674427855], [118.88432666534268, 32.039752026795554], [118.88518704356783, 32.040232567796316], [118.88538712571389, 32.04035269120462], [118.8858573122992, 32.040622972094674], [118.88712775687392, 32.04142370173968], [118.88805802516434, 32.0420942128047], [118.88899824402971, 32.04287471592027], [118.88903825176334, 32.042914738041766], [118.88940832317628, 32.0432449304692], [118.88990840494029, 32.04373519125387], [118.89049847987668, 32.04437549926798], [118.89121854158738, 32.045225870582144], [118.89164855862431, 32.04581610025823], [118.89208856135943, 32.04647633966759], [118.89223855780422, 32.04672642498025], [118.89223855780422, 32.04672642498025], [118.89223855780422, 32.04672642498025], [118.89256854508679, 32.047286611470994], [118.89292851688222, 32.047986829468506], [118.89296851314286, 32.04806685383778], [118.89322848143335, 32.04864702395687], [118.89349843965734, 32.04930721036153], [118.89356842470347, 32.049517266856405], [118.89392833481462, 32.0506975762291], [118.89414824777596, 32.05173783351908], [118.89422820810879, 32.05219794473666], [118.89432812774561, 32.05310815792528], [118.89436804694394, 32.05400836231946], [118.89434796516585, 32.05490856045772], [118.89427788243013, 32.055808753222635], [118.89410778144618, 32.056878972348066], [118.89402774278544, 32.057279051982356], [118.89395771593145, 32.057549103676315], [118.89388768611227, 32.05784916178269], [118.8936776132634, 32.05854929043408], [118.89354757187107, 32.05892935725867], [118.89311744939018, 32.059959522704986], [118.89311744939018, 32.059959522704986], [118.89290739006353, 32.06041959100854], [118.89280736365818, 32.06060961643695], [118.89255729498092, 32.061089679188946], [118.89236724292103, 32.06142971957813], [118.8922672146945, 32.0616097404336], [118.89217719085154, 32.061749753982106], [118.89196713242471, 32.06208978716396], [118.89195712924223, 32.0621097895353], [118.89166704834409, 32.06253982338209], [118.89135695807202, 32.062989853417385], [118.89040665954539, 32.06427990012672], [118.89029662201345, 32.064429903174094], [118.8889161066533, 32.06623988182662], [118.88795569356493, 32.06748981739241], [118.88728537783967, 32.068369751120116], [118.88728537783967, 32.068369751120116], [118.88456387317689, 32.071939289781284], [118.88168189762963, 32.075708469689786], [118.88029080614656, 32.07752795534637], [118.87879953844786, 32.07947731969224], [118.87821901788807, 32.080237049220315], [118.87777861266915, 32.08081683616807], [118.8762671417159, 32.08297608526734], [118.87605692565853, 32.08331598245901], [118.87525608104417, 32.08465558514035], [118.87477555326944, 32.085545353509914], [118.874104790393, 32.08689503860891], [118.87370431735543, 32.08779486249339], [118.87345401488572, 32.08839475728947], [118.87337391681595, 32.08859472481517], [118.87330383033145, 32.08877469725657], [118.8731236081687, 32.08922462282695], [118.87307354576315, 32.08935460298894], [118.87291334228023, 32.08980454603176], [118.8723626326013, 32.09137434762831], [118.87203220097602, 32.09231422262026], [118.87186197816922, 32.09278415362333], [118.87168174075221, 32.093284079871125], [118.87124115140475, 32.09454390233536], [118.8710909504664, 32.09495383606666], [118.87077051554806, 32.0958636992421], [118.87062030813068, 32.09631363865816], [118.87055021465763, 32.09648360178127]],
      cameraList: [
        {
          id: '1',
          cameraId: 1,
          cameraName: '相机1',
          cameraPoint: '118.84428744881488, 32.0067467817991',
          cameraLineStart: '118.84428744881488, 32.0067467817991',
          cameraLineEnd: '118.77860464487073, 31.97324764182064',
          ydzt: 0,
          ydzt1: 1
        }
      ],
      cameraLayer: new VectorLayer({
        source: new VectorSource(),
        style: (feature) => {
          const type = feature.getGeometry().getType()
          const { color } = feature.getProperties()

          const width = 4

          switch (type) {
            case GeometryType.LINE_STRING:
              if (color) {
                return new Style({
                  stroke: new Stroke({
                    color: color,
                    width: width
                  }),
                  fill: new Fill({
                    color: color
                  })
                })
              }
              break
            case GeometryType.POINT:
              // https://openlayers.org/en/latest/examples/icon-color.html
              return new Style({
                image: new Icon({
                  color: 'rgb(223,147,155)',
                  // crossOrigin: 'anonymous',
                  anchor: [0.5, 46],
                  anchorXUnits: 'fraction',
                  anchorYUnits: 'pixels',
                  src: 'http://192.168.4.41/map-wp/location.png'
                })
              })
          }
          // const zoom = this.map.instance.getView().getZoom()
          // console.log(zoom, feature, feature.getProperties(), typeof feature.getProperties(), 'feature.getProperties()')

          return new Style({
            stroke: new Stroke({
              color: 'rgba(100, 255, 0, 1)',
              width: width
            }),
            fill: new Fill({
              color: 'rgba(100, 255, 0, 0.3)'
            })
          })
        }
      })
    }
  },
  created() {
    this.nowTimer = setInterval(() => {
      this.nowTime = this.formatTime(new Date(), 'yyyy-MM-dd HH:mm:ss')
    }, 1000)
  },
  beforeDestroy() {
    if (this.nowTimer) {
      clearInterval(this.nowTimer)
      this.nowTimer = null
    }
  },
  computed: {
    mapExtent() { // 地图边框范围
      return boundingExtent(this.map.coordinates)
    },
    mapCenter() { // 地图中心
      return getCenter(this.mapExtent)
    },
    scrollBoardData() {
      return this.scrollBoardEventList.map(i => this.dealScrollItem(i))
    }
  },
  watch: {
    cameraList(newValue, oldValue) {
      if (!this.map.instance) {
        return
      }

      const colors = ['rgba(0, 255, 0)', 'rgba(255, 255, 0)', 'rgba(255, 0, 0)']

      const features = []

      newValue.map(i => {
        const { cameraPoint, cameraLineStart, cameraLineEnd, ydzt, ydzt1 } = i
        const { id, cameraId, cameraName } = i

        const camera = cameraPoint.split(',').map(i => parseFloat(i))
        const start = cameraLineStart.split(',').map(i => parseFloat(i))
        const end = cameraLineEnd.split(',').map(i => parseFloat(i))

        const subLineCoordinates = this.getSubLineCoordinates(this.roads, start, end)

        const properties = {
          id,
          cameraId,
          cameraName
        }
        // 标记的路线
        const feature = new Feature({
          geometry: new Point(camera),
          name: cameraName,
          ...properties
        })
        feature.setId(cameraId)

        features.push(feature)
        // 标记的路线
        features.push(new GeoJSON().readFeature({
          type: 'Feature',
          geometry: {
            type: 'LineString',
            coordinates: subLineCoordinates
          },
          properties: {
            color: colors[ydzt],
            ...properties
          }
        }))
        console.log(colors[ydzt], typeof colors[ydzt], 'colors[ydzt],')
        // 反方向的路线
        features.push(new GeoJSON().readFeature({
          type: 'Feature',
          geometry: {
            type: 'LineString',
            coordinates: this.getSubLineCoordinates(this.roads_back, start, end)
          },
          properties: {
            color: colors[ydzt1],
            ...properties
          }
        }))
      })

      this.cameraLayer.setMap(this.map.instance)
      this.cameraLayer.setSource(new VectorSource({ features }))
    },
    scrollBoardEventList() {
      this.updateScrollBoard()
    }
  },
  mounted() {
    this.initMap()

    const cameraListElement = this.cameraList[0]
    setInterval(() => {
      cameraListElement.ydzt += 1
      cameraListElement.ydzt %= 3

      cameraListElement.ydzt1 += 2
      cameraListElement.ydzt1 %= 3
      this.$set(this.cameraList, 0, cameraListElement)

      if (this.scrollBoardEventList.length > 9) {
        this.scrollBoardEventList.shift()
      }

      const arr = ['https://www.w3school.com.cn/i/movie.ogg',
        'https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-720p.mp4']
      this.scrollBoardEventList.push({
        eventId: 2,
        name: '违停',
        timestamp: new Date().toLocaleTimeString(),
        cameraId: 1,
        img: 'https://www.w3school.com.cn/i/eg_tulip.jpg',
        video: arr[Math.floor(Math.random() * 2)]
      })
    }, 5000)
  },
  methods: {
    toggleTrafficFlow() {
      const { type } = this.trafficFlowPieOption
      const trafficFlowPie = this.$refs.trafficFlowPie
      console.log(trafficFlowPie, typeof trafficFlowPie, 'trafficFlowPie')

      if (type && type === 'hour') {
        this.trafficFlowPieOption.type = 'day'
        trafficFlowPie.setOption({
          title: {
            text: '当日车型流量占比'
          }
        })
      } else {
        this.trafficFlowPieOption.type = 'hour'
        trafficFlowPie.setOption({
          title: {
            text: '最近一小时车型流量占比'
          }
        })
      }
    },
    startVideo(video, event) {
      console.log(video, typeof video, 'id')
      this.eventVideoUrl = video
      event.stopPropagation()
    },
    showEvent(eventId, event) {
      const item = this.scrollBoardEventList.filter(i => i.eventId === eventId)[0]
      console.log(item, typeof item, 'item')
      const { cameraId, video } = item

      if (cameraId) {
        const featureById = this.cameraLayer.getSource().getFeatureById(cameraId)
        if (featureById) {
          const geometry = featureById.getGeometry()
          this.mapFocus(this.map.instance, geometry)
        }

        if (video) {
          this.eventVideoUrl = video
        }
      }
      event.stopPropagation()
    },
    dealScrollItem(item) {
      const { eventId, name, timestamp, img, video } = item
      window.startVideo = this.startVideo
      window.showEvent = this.showEvent
      const dom = `<div class="scroll-item" onclick="showEvent(${eventId},event)" >
                     <img src="${img}" alt="" height="100%">
                     <div class="scroll-item-content">
                       <div style="height: 100%;display: flex;flex-direction:column;">
                         <p style="flex: 1;"><i class="el-icon-video-camera" onclick="startVideo('${video}',event)"></i></p>
                         <p style="flex: 1;">事件：<span>${name}</span></p>
                         <p style="flex: 1;">时间：<span>${timestamp}</span></p>
                       </div>
                     </div>
                   </div>`
      return [dom]
    },
    updateScrollBoard() {
      this.$refs.scrollBoard.updateRows(this.scrollBoardData, this.scrollBoardData.length - 1)
    },
    resizeVideo() {
      console.log('resizeVideo')
      window.dispatchEvent(new Event('resize'))
    },
    initMap() {
      const kml = new VectorLayer({
        source: new VectorSource({
          url: 'http://192.168.4.41/map-wp/Rectangle.kml',
          format: new KML()
        })
      })

      const extent = this.mapExtent
      const center = this.mapCenter
      const roads = this.roads
      const roads_back = this.roads_back

      // 瓦片底图
      const baseLayer = new TileLayer({
        source: new XYZSource({
          url: 'http://192.168.4.41/map-wp/{z}/{x}/{y}.png',
          tileSize: 256,
          projection: 'EPSG:3857'
        }),
        extent
      })

      // 公路 geojson
      const geojsonObject = {
        type: 'FeatureCollection',
        crs: {
          type: 'name',
          properties: {
            name: 'EPSG:4326'
          }
        },
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'LineString',
              coordinates: roads
            }
          },
          {
            type: 'Feature',
            geometry: {
              type: 'LineString',
              coordinates: roads_back
            }
          }
        ]
      }
      // 公路图层
      const roadsLayer = new VectorLayer({
        source: new VectorSource({
          features: new GeoJSON().readFeatures(geojsonObject)
        }),
        style: new Style({
          stroke: new Stroke({
            color: 'green',
            width: 4
          })
        })
      })

      // const OSMLayer = new TileLayer({
      //   source: new OSMSource()
      // })

      // const tileDebug = new TileLayer({
      //   source: new TileDebug()
      // })
      const map = new Map({
        target: 'ol-map',
        layers: [baseLayer, kml, roadsLayer],
        view: new View({
          projection: 'EPSG:4326', // WGS84
          center,
          extent,
          constrainOnlyCenter: false,
          enableRotation: false, // 禁用旋转
          zoom: 13, // 默认缩放级别
          maxZoom: 19, // 最大缩放级别
          minZoom: 8// 最小缩放级别
        }),
        controls: controlDefaults({
          attribution: false,
          rotate: false,
          zoom: false
        }).extend([
          // 是否显示鼠标所在地图点的经纬度
          new MousePosition()
          // new FullScreen()
        ])
      })

      // map.getView().on('change:resolution', () => {
      //   const zoom = map.getView().getZoom()
      //   console.log(zoom, typeof zoom, 'map View zoom')
      // })

      this.map.instance = map

      // click事件用于开始/结束功能的跟踪
      map.on('click', (e) => {
        console.log(e, typeof e, 'map click event')

        const pixel = map.getEventPixel(e.originalEvent)
        const featureAtPixel = this.cameraFeatureAtPixel(pixel)
        if (featureAtPixel) {
          const geometry = featureAtPixel.getGeometry()
          this.mapFocus(map, geometry)

          if (geometry.getType() === GeometryType.POINT) {
            this.eventVideoUrl = 'https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-720p.mp4'
          }
        }
      })

      // 在标记上时更改鼠标光标
      map.on('pointermove', (e) => {
        if (e.dragging) {
          return
        }

        const pixel = map.getEventPixel(e.originalEvent)
        map.getTargetElement().style.cursor = this.cameraFeatureAtPixel(pixel) ? 'pointer' : ''
      })

      /* ↑  */
    },
    mapFocus(map, geometry) {
      map.updateSize()
      const [width, height] = map.getSize()
      const paddingLR = Math.floor(width / 4) + 100
      console.log([width, height], typeof [width, height], 'map [width, height]')

      map.getView().fit(geometry, {
        padding: [68, paddingLR, 0, paddingLR],
        duration: 1000
      })
    },
    cameraFeatureAtPixel(pixel) {
      const map = this.map.instance
      const hit = map.hasFeatureAtPixel(pixel)
      if (!hit) {
        return null
      }
      const featureAtPixel = map.getFeaturesAtPixel(pixel)[0]
      const hasFeature = this.cameraLayer.getSource().hasFeature(featureAtPixel)
      return hasFeature ? featureAtPixel : null
    },
    getSubLineCoordinates(coordinates, start, end) {
      // 示例 https://openlayers.org/en/latest/examples/tracing.html
      // 起终点不在线上时，先获取线上到起终点最近的点
      const lineString = new LineString(coordinates)
      start = lineString.getClosestPoint(start)
      end = lineString.getClosestPoint(end)

      // coordinates; will return the length of the [a, b] segment
      function length(a, b) {
        return Math.sqrt(
          (b[0] - a[0]) * (b[0] - a[0]) + (b[1] - a[1]) * (b[1] - a[1])
        )
      }

      // 坐标如果c在[a，b]段上，则将返回true
      function isOnSegment(c, a, b) {
        const lengthAc = length(a, c)
        const lengthAb = length(a, b)
        const dot =
            ((c[0] - a[0]) * (b[0] - a[0]) + (c[1] - a[1]) * (b[1] - a[1])) / lengthAb
        return Math.abs(lengthAc - dot) < 1e-6 && lengthAc < lengthAb
      }

      let pointA
      let pointB
      let startSegmentIndex = -1
      let endSegmentIndex = -1

      for (let i = 0; i < coordinates.length - 1; i++) {
        pointA = coordinates[i]
        pointB = coordinates[i + 1]

        // 检查这是否是起始细分点产品
        if (isOnSegment(start, pointA, pointB)) {
          startSegmentIndex = i
        }
        if (isOnSegment(end, pointA, pointB)) {
          endSegmentIndex = i
        }
        if (startSegmentIndex !== -1 && endSegmentIndex !== -1) {
          break
        }
      }

      let slice
      if (endSegmentIndex >= startSegmentIndex) {
        slice = coordinates.slice(startSegmentIndex + 1, endSegmentIndex + 1)
        slice.unshift(start)
        slice.push(end)
      } else if (endSegmentIndex < startSegmentIndex) {
        slice = coordinates.slice(endSegmentIndex + 1, startSegmentIndex + 1)
        slice.unshift(end)
        slice.push(start)
        slice.reverse()
      }
      return slice
    },
    /**
     * @param {date} time 需要转换的时间
     * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
     */
    formatTime(time, fmt) {
      if (!time) return ''
      else {
        const date = new Date(time)
        const o = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'H+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds(),
          'q+': Math.floor((date.getMonth() + 3) / 3),
          S: date.getMilliseconds()
        }
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + '').substr(4 - RegExp.$1.length)
          )
        }
        for (const k in o) {
          if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length)
            )
          }
        }
        return fmt
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .index {
    color: #d3d6dd;
    width: 100%;
    height: 100vh;
    background-image: url("./assets/page-bg.png");
    background-size: cover;
    background-position: center center;
    position: relative;
    display: flex;

    .d-flex {
      display: flex;
    }

    ::v-deep {
      .d-flex {
        display: flex;
      }

      $flex-jc: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      );

      $flex-ai: (
        start: flex-start,
        end: flex-end,
        center: center,
        stretch: stretch,
      );

      //flex
      @each $key, $value in $flex-jc {
        .jc-#{$key} {
          justify-content: $value;
        }
      }

      @each $key, $value in $flex-ai {
        .ai-#{$key} {
          align-items: $value;
        }
      }
    }

    #ol-map {
      width: 100%;
      height: calc(100% - 16px - 50px);
      position: absolute;
      top: 66px;
      left: 0;
    }

    .header-container {
      background-color: rgba(5, 7, 17, 125);
      padding-top: 16px;

      .back {
        display: block;
        text-align: left;
        line-height: 45px;
        font-size: 22px;
        text-indent: 0.5em;

        i {
          cursor: pointer;

          &:hover {
            color: #1890ff;
          }
        }
      }

      .header-title-container {
        height: 50px;
        position: relative;
        text-align: center;
        background-size: cover;
        background-repeat: no-repeat;

        .header-title-content {
          font-size: 24px;
          line-height: 50px;
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%);
        }

        .header-title-decoration {
          position: absolute;
          text-align: left;
          left: 0;
          top: -0.4em;
        }
      }

      .time {
        display: block;
        text-align: right;
        font-size: 20px;
        line-height: 45px;
        padding-right: 2em;
      }

      // 平行四边形
      .react-left {
        cursor: pointer;
        font-size: 0.225rem;
        width: 3.75rem;
        height: 0.625rem;
        line-height: 0.625rem;
        text-align: center;
        transform: skewX(-45deg);

        .react-after {
          position: absolute;
          right: -0.3125rem;
          top: 0;
          height: 0.625rem;
          width: 0.625rem;
          background-color: #0f1325;
          transform: skewX(45deg);
        }

        .text {
          display: inline-block;
          transform: skewX(45deg);
        }
      }

      .react-right {
        cursor: pointer;
        font-size: 0.225rem;
        width: 3.75rem;
        height: 0.625rem;
        line-height: 0.625rem;
        text-align: center;
        transform: skewX(45deg);

        .react-before {
          position: absolute;
          left: -0.3125rem;
          top: 0;
          height: 0.625rem;
          width: 0.625rem;
          background-color: #0f1325;
          transform: skewX(-45deg);
        }

        .text {
          display: inline-block;
          transform: skewX(-45deg);
        }
      }

      .body-box {
        margin-top: 0.2rem;
        display: flex;
        flex-direction: column;

        //下方区域的布局
        .content-box {
          display: grid;
          grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
        }

        // 底部数据
        .bototm-box {
          margin-top: 0.125rem;
          display: grid;
          grid-template-columns: repeat(2, 50%);
        }
      }
    }

    .pointer-events-a {
      pointer-events: all;
    }

    .box11 {
      box-sizing: border-box;
      padding: 58px 17px 12px;
    }

    .box12 {
      box-sizing: border-box;
      padding: 10px;
    }

    .box13 {
      box-sizing: border-box;
      padding: 24px 10px 20px;

      ::v-deep {
        .ceil {
          width: 100%;
          height: 100%;
        }
      }
    }

    .scroll-board::v-deep {
      .scroll-item {
        width: 100%;
        height: 100%;
        cursor: pointer;
        box-sizing: border-box;
        padding: 4px 0;
        display: flex;

        .scroll-item-content {
          height: 100%;
          padding-left: 1em;
          flex: 1;
          font-size: 18px;
          line-height: 100%;
          text-align: left;

          .el-icon-video-camera {
            &:hover {
              color: #1890ff;
            }
          }
        }
      }
    }
  }
</style>
